<template>
	<!-- 
	1.手机蓝牙打开
	2.微信也许访问蓝牙和位置信息
	3.重启蓝牙设备
	4.不行的时候,删掉手机中蓝牙,重新链接 
	-->
	<view class="content">
		<button type="primary" @tap="pickUpOnce">测试打印</button>
		<button type="primary" @tap="pickUpNum">测试打印数字</button>
		<button type="primary" @tap="pickUpRowNum">测试打印一行数字</button>
		<button type="primary" @tap="pickUpRemark">打印备注</button>
		<canvas canvas-id="shareCanvas" style="width: 240px; height: 240px;"></canvas>
	</view>
</template>

<script>
	import PrinterJobs from '@/common/print/printerjobs.js'
	import printerUtil from '@/common/print/printerutil.js'
	import util from '@/common/print/util.js'
	import drawQrcode from '@/common/print/weapp.qrcode.esm.js'
	import Bluetooth from '@/common/print/bluetooth.js'

	let bluetooth = new Bluetooth();
	export default {
		components: {},
		data() {
			return {
				canvas_width: 240,
				canvas_height: 240,
			}
		},
		//页面打开,获取位置,打开蓝牙链接
		onLoad() {
			bluetooth.reconnect();
		},
		onUnload() {
			bluetooth.closeBLEConnection();
		},
		methods: {
			//打印一次
			pickUpOnce() {
				let self = this;
				setTimeout(() => {
					self.writeBLECharacteristicValue();
				}, 500);
			},
			// 打印一列数字
			pickUpNum(){
				let self = this;
				setTimeout(() => {
					self.printNumbers();
				}, 500);
			},
			// 打印一行数字
			pickUpRowNum(){
				let self = this;
				setTimeout(() => {
					self.printRowNumbers();
				}, 500);
			},
			// 打印一列数字
			pickUpRemark(){
				let self = this;
				setTimeout(() => {
					self.printRemarks();
				}, 500);
			},
			
			//写入控制命令
			async writeBLECharacteristicValue() {

				let Qrcode_res = await this.get_Qrcode();

				console.log(Qrcode_res);

				let printerJobs = new PrinterJobs();
				printerJobs
				// 打印当前时间
					.print(util.formatTime(new Date()))
					// 打印分隔线
					.print(printerUtil.fillLine())
					// 对齐方式 LT/CT/RT 居左 居中 居右
					.setAlign('ct')
					// 大字号
					.setSize(2, 2)
					// 大字号内容
					.print('#20外卖')
					// 小字号
					.setSize(1, 1)
					// 小字号内容
					.print('切尔西Chelsea')
					.setSize(2, 2)
					.print('在线支付(已支付)')
					.setSize(1, 1)
					.print('订单号：5415221202244734')
					.print('下单时间：' + util.formatTime(new Date()))
					.setAlign('lt')
					.print(printerUtil.fillAround('一号口袋'))
					// 
					.print(printerUtil.inline('意大利茄汁一面 * 1', '15'))
					// 分隔线带文字
					.print(printerUtil.fillAround('其他'))
					.print('餐盒费：1')
					.print('[赠送康师傅冰红茶] * 1')
					.print(printerUtil.fillLine())
					.setAlign('rt')
					.print('原价：￥16')
					.print('总价：￥16')
					.setAlign('lt')
					.print(printerUtil.fillLine())
					.print('备注')
					.print("无")
					.print(printerUtil.fillLine())
					.printQrcode(Qrcode_res)
					.println()

				;


				//console.log(printerJobs);

				let buffer = printerJobs.buffer();

				this.printbuffs(buffer);
			},
			async printRemarks()
			{
				let printerJobs = new PrinterJobs();
				printerJobs
				// 打印当前时间
					.print(util.formatTime(new Date()))
					// 打印分隔线
					.print(printerUtil.fillLine())
					// 对齐方式 LT/CT/RT 居左 居中 居右
					.setAlign('lt')
					// 小字号
					.setSize(1, 1)
					// 小字号内容
					.print('1')
					
					.println();				
				let buffer = printerJobs.buffer();				
				this.printbuffs(buffer);
			},
			async printRowNumbers()
			{
				let printerJobs = new PrinterJobs();
				printerJobs
				// 打印当前时间
					.print(util.formatTime(new Date()))
					// 打印分隔线
					.print(printerUtil.fillLine())
					// 对齐方式 LT/CT/RT 居左 居中 居右
					.setAlign('lt')
					// 小字号
					.setSize(1, 1)
					// 小字号内容
					.print('12345678901234567890123456789012345678901234567890123456789012345678901234567890')
					.print('abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz')
					.print('ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ')
					.print('一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十')
					.println();				
				let buffer = printerJobs.buffer();				
				this.printbuffs(buffer);
			},
			async printNumbers()
			{
				let printerJobs = new PrinterJobs();
				printerJobs
				// 打印当前时间
					.print(util.formatTime(new Date()))
					// 打印分隔线
					.print(printerUtil.fillLine())
					// 对齐方式 LT/CT/RT 居左 居中 居右
					.setAlign('lt')
					// 小字号
					.setSize(1, 1)
					// 小字号内容
					.print('1')
					.print('2')
					.print('3')
					.print('4')
					.print('5')
					.print('6')
					.print('7')
					.print('8')
					.print('9')
					.print('10')
					.print('11')
					.print('12')
					.print('13')
					.print('14')
					.print('15')
					.print('16')
					.print('17')
					.print('18')
					.print('19')
					.print('20')
					.print('21')
					.print('22')
					.print('23')
					.print('24')
					.print('25')
					.print('26')
					.print('27')
					.print('28')
					.print('29')
					.print('30')
					.println();				
				let buffer = printerJobs.buffer();				
				this.printbuffs(buffer);
			},
			printbuffs(buffer) {
				// 1.并行调用多次会存在写失败的可能性
				// 2.建议每次写入不超过20字节
				// 分包处理，延时调用
				const maxChunk = 20;
				const delay = 20;
				for (let i = 0, j = 0, length = buffer.byteLength; i < length; i += maxChunk, j++) {
					let subPackage = buffer.slice(i, i + maxChunk <= length ? (i + maxChunk) : length);
					setTimeout(this.printbuff, j * delay, subPackage);
				}
			},

			printbuff(buffer) {
				bluetooth.writeBLECharacteristicValue(buffer);
			},

			get_Qrcode() {
				let self = this;
				return new Promise((resolve, reject) => {
					const ctx = uni.createCanvasContext('shareCanvas');
					console.log(self.canvas_width);
					ctx.clearRect(0, 0, self.canvas_width, self.canvas_height);

					drawQrcode({
						canvasId: 'shareCanvas',
						text: String('xiaonibaba.com'),
						width: self.canvas_width,
						height: self.canvas_height,
						callback(e) {
							setTimeout(() => {
								console.log(self.canvas_width);
								// 获取图片数据
								uni.canvasGetImageData({
									canvasId: 'shareCanvas',
									x: 0,
									y: 0,
									width: self.canvas_width,
									height: self.canvas_height,
									success(res) {
										resolve(util.zip_image(res));
									}
								})
							}, 1000);
						}
					});
				});
			},

		}
	}
</script>

<style>
	.content {}

	page {
		color: #333;
	}

	button {
		margin: 10upx;
	}

	.devices_summary {
		margin-top: 5rpx;
		padding: 20rpx;
		font-size: 30rpx;
	}

	.device_list {
		margin: 5rpx 20rpx 5rpx 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 10rpx;
		background-color: #FdFdFd;
		min-height: 0rpx;
		max-height: 400rpx;
		width: 700rpx;

	}

	.device_item {
		border-bottom: 1rpx solid #ddd;
		padding: 20rpx;
		color: #666;

	}

	.device_item_hover {
		background-color: rgba(0, 0, 0, .1);
	}

	.connected_info {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #F0F0F0;
		padding: 10px;
		padding-bottom: 20px;
		margin-bottom: env(safe-area-inset-bottom);
		font-size: 14px;
		min-height: 100px;
		box-shadow: 0px 0px 3px 0px;
	}

	.connected_info .operation {
		position: absolute;
		display: inline-block;
		right: 30px;
	}
</style>